<template>
  <Transition name="logo-fade">
    <RouterLink
      to="/"
      :key="sidebar.opened ? 'open' : 'close'"
      class="h-[84px] c-white font-bold text-[20px] flex items-center justify-center decoration-none"
    >
      <svg-icon
        icon-name="cbi:deezer-logo"
        custom-class="text-#ffffff"
      ></svg-icon>
      <span v-if="!sidebar.opened" class="ml-[10px]">YM-Admin</span>
    </RouterLink>
  </Transition>
  <el-menu
    class="sidebarContainerMenu"
    :default-active="activeRoute"
    :background-color="variables.menuBg"
    :text-color="variables.menuText"
    :active-text-color="settingStore.theme"
    :collapse="sidebar.opened"
  >
    <SideBarItem
      v-for="route in routes"
      :key="route.path"
      :item="route"
      :base-path="route.path"
    ></SideBarItem>
  </el-menu>
</template>

<script setup lang="ts" name="SideBar">
import { useAppStore } from "@/store"
import variables from "@/style/variables.module.scss"
import { routes } from "@/router"
import { useSettingStore } from "@/store/setting"
// console.log(routes)
const route = useRoute()
// console.log(route)
const { sidebar } = useAppStore()
const settingStore = useSettingStore()
const activeRoute = computed(() => route.path)
console.log("activeRoute", activeRoute.value)
</script>

<style scoped lang="scss">
.sidebarContainerMenu {
  border-right: none !important;
  background-color: v-bind("settingStore.theme") !important;
}

.logo-fade-enter-active,
.logo-fade-leave-active {
  transition: opacity 0.2s ease-in-out;
}

.logo-fade-enter-from,
.logo-fade-leave-to {
  opacity: 0;
}
</style>
